<template>
  <div>
    <Input type="text" v-model="inputValue" @change="valueChange">
      <template #prepend>验证码</template>
      <template #suffix>
        <VCode @change="changeCode" @click="refresh" ref="vcodeRef"></VCode>
      </template>
    </Input>
    <br />
    <br />
    <div><Button @click="refresh">刷新一下</Button></div>
  </div>
</template>

<script>
import VCode from "@/components/VCode/VCode.vue";
import Input from "@/components/Input/Input.vue";
import Button from "@/components/Button/Button.vue";
export default {
  components: {
    VCode,
    Input,
    Button,
  },
  data() {
    return {
      inputValue: "", // 验证码输入框
      vcode: "",
    };
  },

  methods: {
    changeCode(value) {
      this.vcode = value;
    },
    refresh() {
      this.$refs.vcodeRef && this.$refs.vcodeRef.draw();
    },
    valueChange(value) {
      if (value.trim() && value == this.vcode) {
        console.log("验证码正确");
      } else {
        console.log("验证验证码错误码正确");
      }
    },
  },
};
</script>

<style scoped></style>
